<template>
  <div>
    <a-tree
    v-model="checkedKeys"
    checkable
    :expanded-keys="expandedKeys"
    :auto-expand-parent="autoExpandParent"
    :selected-keys="selectedKeys"
    :tree-data="treeData"
    @expand="onExpand"
    @select="onSelect"
  />
  <div class="button">
    <a-button type="primary">确认</a-button>
    <a-button>取消</a-button>
  </div>

  </div>
</template>

<script>
//模拟树形菜单数据
const treeData = [
  {
    title: '0-0',
    key: '0-0',
    children: [
      {
        title: '0-0-0',
        key: '0-0-0',
        children: [
          { title: '0-0-0-0', key: '0-0-0-0' },
          { title: '0-0-0-1', key: '0-0-0-1' },
          { title: '0-0-0-2', key: '0-0-0-2' },
        ],
      },
      {
        title: '0-0-1',
        key: '0-0-1',
        children: [
          { title: '0-0-1-0', key: '0-0-1-0' },
          { title: '0-0-1-1', key: '0-0-1-1' },
          { title: '0-0-1-2', key: '0-0-1-2' },
        ],
      },
      {
        title: '0-0-2',
        key: '0-0-2',
      },
    ],
  },
  {
    title: '0-1',
    key: '0-1',
    children: [
      { title: '0-1-0-0', key: '0-1-0-0' },
      { title: '0-1-0-1', key: '0-1-0-1' },
      { title: '0-1-0-2', key: '0-1-0-2' },
    ],
  },
  {
    title: '0-2',
    key: '0-2',
  },
];
  export default {
    components:{
           
        },
    data() {
    return {
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],  //所有选中项的数组
      selectedKeys: [],
      treeData,
    };
  },
  watch: {
    checkedKeys(val) {
      //返回侦听所有选中项
      console.log('onCheck', val);
    },
  },
  methods: {
    //返回展开的树形对象的数组
    onExpand(expandedKeys) {
      console.log('onExpand', expandedKeys);
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    // onCheck(checkedKeys) {
    //   console.log('onCheck', checkedKeys);
    //   this.checkedKeys = checkedKeys;
    // },
    onSelect(selectedKeys, info) {
      //可以返回一个子元素是否选中的一个布尔值
      console.log('onSelect', info);
      this.selectedKeys = selectedKeys;
    },
  },
  }
</script>

<style lang="less" scoped>
.button{
  min-width: 200px;
  display: flex;
  justify-content: space-around;
}
</style>